1 /* @extend display-flex; */
2 display-flex, .display-flex, .display-flex-center, .signup-content, .signin-content, .social-login, .socials {
3 display: flex;
4 display: -webkit-flex; }
5
6 /* @extend list-type-ulli; */
7 list-type-ulli, .socials {
8 list-style-type: none;
9 margin: 0;
10 padding: 0; }
11
12 /* poppins-300 - latin */
13 @font-face {
14 font-family: 'Poppins';
15 font-style: normal;
16 font-weight: 300;
17 src: url("../fonts/poppins/poppins-v5-latin-300.eot");
18 /* IE9 Compat Modes */
19 src: local("Poppins Light"), local("Poppins-Light"), url("../fonts/poppins/poppins-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300.svg#Poppins") format("svg");
20 /* Legacy iOS */ }
21 /* poppins-300italic - latin */
22 @font-face {
23 font-family: 'Poppins';
24 font-style: italic;
25 font-weight: 300;
26 src: url("../fonts/poppins/poppins-v5-latin-300italic.eot");
27 /* IE9 Compat Modes */
28 src: local("Poppins Light Italic"), local("Poppins-LightItalic"), url("../fonts/poppins/poppins-v5-latin-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300italic.svg#Poppins") format("svg");
29 /* Legacy iOS */ }
30 /* poppins-regular - latin */
31 @font-face {
32 font-family: 'Poppins';
33 font-style: normal;
34 font-weight: 400;
35 src: url("../fonts/poppins/poppins-v5-latin-regular.eot");
36 /* IE9 Compat Modes */
37 src: local("Poppins Regular"), local("Poppins-Regular"), url("../fonts/poppins/poppins-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-regular.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-regular.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-regular.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-regular.svg#Poppins") format("svg");
38 /* Legacy iOS */ }
39 /* poppins-italic - latin */
40 @font-face {
41 font-family: 'Poppins';
42 font-style: italic;
43 font-weight: 400;
44 src: url("../fonts/poppins/poppins-v5-latin-italic.eot");
45 /* IE9 Compat Modes */
46 src: local("Poppins Italic"), local("Poppins-Italic"), url("../fonts/poppins/poppins-v5-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-italic.svg#Poppins") format("svg");
47 /* Legacy iOS */ }
48 /* poppins-500 - latin */
49 @font-face {
50 font-family: 'Poppins';
51 font-style: normal;
52 font-weight: 500;
53 src: url("../fonts/poppins/poppins-v5-latin-500.eot");
54 /* IE9 Compat Modes */
55 src: local("Poppins Medium"), local("Poppins-Medium"), url("../fonts/poppins/poppins-v5-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500.svg#Poppins") format("svg");
56 /* Legacy iOS */ }
57 /* poppins-500italic - latin */
58 @font-face {
59 font-family: 'Poppins';
60 font-style: italic;
61 font-weight: 500;
62 src: url("../fonts/poppins/poppins-v5-latin-500italic.eot");
63 /* IE9 Compat Modes */
64 src: local("Poppins Medium Italic"), local("Poppins-MediumItalic"), url("../fonts/poppins/poppins-v5-latin-500italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500italic.svg#Poppins") format("svg");
65 /* Legacy iOS */ }
66 /* poppins-600 - latin */
67 @font-face {
68 font-family: 'Poppins';
69 font-style: normal;
70 font-weight: 600;
71 src: url("../fonts/poppins/poppins-v5-latin-600.eot");
72 /* IE9 Compat Modes */
73 src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../fonts/poppins/poppins-v5-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-600.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-600.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-600.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-600.svg#Poppins") format("svg");
74 /* Legacy iOS */ }
75 /* poppins-700 - latin */
76 @font-face {
77 font-family: 'Poppins';
78 font-style: normal;
79 font-weight: 700;
80 src: url("../fonts/poppins/poppins-v5-latin-700.eot");
81 /* IE9 Compat Modes */
82 src: local("Poppins Bold"), local("Poppins-Bold"), url("../fonts/poppins/poppins-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700.svg#Poppins") format("svg");
83 /* Legacy iOS */ }
84 /* poppins-700italic - latin */
85 @font-face {
86 font-family: 'Poppins';
87 font-style: italic;
88 font-weight: 700;
89 src: url("../fonts/poppins/poppins-v5-latin-700italic.eot");
90 /* IE9 Compat Modes */
91 src: local("Poppins Bold Italic"), local("Poppins-BoldItalic"), url("../fonts/poppins/poppins-v5-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700italic.svg#Poppins") format("svg");
92 /* Legacy iOS */ }
93 /* poppins-800 - latin */
94 @font-face {
95 font-family: 'Poppins';
96 font-style: normal;
97 font-weight: 800;
98 src: url("../fonts/poppins/poppins-v5-latin-800.eot");
99 /* IE9 Compat Modes */
100 src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url("../fonts/poppins/poppins-v5-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800.svg#Poppins") format("svg");
101 /* Legacy iOS */ }
102 /* poppins-800italic - latin */
103 @font-face {
104 font-family: 'Poppins';
105 font-style: italic;
106 font-weight: 800;
107 src: url("../fonts/poppins/poppins-v5-latin-800italic.eot");
108 /* IE9 Compat Modes */
109 src: local("Poppins ExtraBold Italic"), local("Poppins-ExtraBoldItalic"), url("../fonts/poppins/poppins-v5-latin-800italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800italic.svg#Poppins") format("svg");
110 /* Legacy iOS */ }
111 /* poppins-900 - latin */
112 @font-face {
113 font-family: 'Poppins';
114 font-style: normal;
115 font-weight: 900;
116 src: url("../fonts/poppins/poppins-v5-latin-900.eot");
117 /* IE9 Compat Modes */
118 src: local("Poppins Black"), local("Poppins-Black"), url("../fonts/poppins/poppins-v5-latin-900.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-900.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-900.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-900.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-900.svg#Poppins") format("svg");
119 /* Legacy iOS */ }
120 a:focus, a:active {
121 text-decoration: none;
122 outline: none;
123 transition: all 300ms ease 0s;
124 -moz-transition: all 300ms ease 0s;
125 -webkit-transition: all 300ms ease 0s;
126 -o-transition: all 300ms ease 0s;
127 -ms-transition: all 300ms ease 0s; }
128
129 input, select, textarea {
130 outline: none;
131 appearance: unset !important;
132 -moz-appearance: unset !important;
133 -webkit-appearance: unset !important;
134 -o-appearance: unset !important;
135 -ms-appearance: unset !important; }
136
137 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
138 appearance: none !important;
139 -moz-appearance: none !important;
140 -webkit-appearance: none !important;
141 -o-appearance: none !important;
142 -ms-appearance: none !important;
143 margin: 0; }
144
145 input:focus, select:focus, textarea:focus {
146 outline: none;
147 box-shadow: none !important;
148 -moz-box-shadow: none !important;
149 -webkit-box-shadow: none !important;
150 -o-box-shadow: none !important;
151 -ms-box-shadow: none !important; }
152
153 input[type=checkbox] {
154 appearance: checkbox !important;
155 -moz-appearance: checkbox !important;
156 -webkit-appearance: checkbox !important;
157 -o-appearance: checkbox !important;
158 -ms-appearance: checkbox !important; }
159
160 input[type=radio] {
161 appearance: radio !important;
162 -moz-appearance: radio !important;
163 -webkit-appearance: radio !important;
164 -o-appearance: radio !important;
165 -ms-appearance: radio !important; }
166
167 img {
168 max-width: 100%;
169 height: auto; }
170
171 figure {
172 margin: 0; }
173
174 p {
175 margin-bottom: 0px;
176 font-size: 15px;
177 color: #777; }
178
179 h2 {
180 line-height: 1.66;
181 margin: 0;
182 padding: 0;
183 font-weight: bold;
184 color: #222;
185 font-family: Poppins;
186 font-size: 36px; }
187
188 .main {
189 background: #f8f8f8;
190 padding: 150px 0; }
191
192 .clear {
193 clear: both; }
194
195 body {
196 font-size: 13px;
197 line-height: 1.8;
198 color: #222;
199 background: #f8f8f8;
200 font-weight: 400;
201 font-family: Poppins; }
202
203 .container {
204 width: 900px;
205 background: #fff;
206 margin: 0 auto;
207 box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
208 -moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
209 -webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
210 -o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
211 -ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
212 border-radius: 20px;
213 -moz-border-radius: 20px;
214 -webkit-border-radius: 20px;
215 -o-border-radius: 20px;
216 -ms-border-radius: 20px; }
217
218 .display-flex {
219 justify-content: space-between;
220 -moz-justify-content: space-between;
221 -webkit-justify-content: space-between;
222 -o-justify-content: space-between;
223 -ms-justify-content: space-between;
224 align-items: center;
225 -moz-align-items: center;
226 -webkit-align-items: center;
227 -o-align-items: center;
228 -ms-align-items: center; }
229
230 .display-flex-center {
231 justify-content: center;
232 -moz-justify-content: center;
233 -webkit-justify-content: center;
234 -o-justify-content: center;
235 -ms-justify-content: center;
236 align-items: center;
237 -moz-align-items: center;
238 -webkit-align-items: center;
239 -o-align-items: center;
240 -ms-align-items: center; }
241
242 .position-center {
243 position: absolute;
244 top: 50%;
245 left: 50%;
246 transform: translate(-50%, -50%);
247 -moz-transform: translate(-50%, -50%);
248 -webkit-transform: translate(-50%, -50%);
249 -o-transform: translate(-50%, -50%);
250 -ms-transform: translate(-50%, -50%); }
251
252 .signup {
253 margin-bottom: 150px; }
254
255 .signup-content {
256 padding: 75px 0; }
257
258 .signup-form, .signup-image, .signin-form, .signin-image {
259 width: 50%;
260 overflow: hidden; }
261
262 .signup-image {
263 margin: 0 55px; }
264
265 .form-title {
266 margin-bottom: 33px; }
267
268 .signup-image {
269 margin-top: 45px; }
270
271 figure {
272 margin-bottom: 50px;
273 text-align: center; }
274
275 .form-submit {
276 display: inline-block;
277 background: #6dabe4;
278 color: #fff;
279 border-bottom: none;
280 width: auto;
281 padding: 15px 39px;
282 border-radius: 5px;
283 -moz-border-radius: 5px;
284 -webkit-border-radius: 5px;
285 -o-border-radius: 5px;
286 -ms-border-radius: 5px;
287 margin-top: 25px;
288 cursor: pointer; }
289 .form-submit:hover {
290 background: #4292dc; }
291
292 #signin {
293 margin-top: 16px; }
294
295 .signup-image-link {
296 font-size: 14px;
297 color: #222;
298 display: block;
299 text-align: center; }
300
301 .term-service {
302 font-size: 13px;
303 color: #222; }
304
305 .signup-form {
306 margin-left: 75px;
307 margin-right: 75px;
308 padding-left: 34px; }
309
310 .register-form {
311 width: 100%; }
312
313 .form-group {
314 position: relative;
315 margin-bottom: 25px;
316 overflow: hidden; }
317 .form-group:last-child {
318 margin-bottom: 0px; }
319
320 input {
321 width: 100%;
322 display: block;
323 border: none;
324 border-bottom: 1px solid #999;
325 padding: 6px 30px;
326 font-family: Poppins;
327 box-sizing: border-box; }
328 input::-webkit-input-placeholder {
329 color: #999; }
330 input::-moz-placeholder {
331 color: #999; }
332 input:-ms-input-placeholder {
333 color: #999; }
334 input:-moz-placeholder {
335 color: #999; }
336 input:focus {
337 border-bottom: 1px solid #222; }
338 input:focus::-webkit-input-placeholder {
339 color: #222; }
340 input:focus::-moz-placeholder {
341 color: #222; }
342 input:focus:-ms-input-placeholder {
343 color: #222; }
344 input:focus:-moz-placeholder {
345 color: #222; }
346
347 input[type=checkbox]:not(old) {
348 width: 2em;
349 margin: 0;
350 padding: 0;
351 font-size: 1em;
352 display: none; }
353
354 input[type=checkbox]:not(old) + label {
355 display: inline-block;
356 line-height: 1.5em;
357 margin-top: 6px; }
358
359 input[type=checkbox]:not(old) + label > span {
360 display: inline-block;
361 width: 13px;
362 height: 13px;
363 margin-right: 15px;
364 margin-bottom: 3px;
365 border: 1px solid #999;
366 border-radius: 2px;
367 -moz-border-radius: 2px;
368 -webkit-border-radius: 2px;
369 -o-border-radius: 2px;
370 -ms-border-radius: 2px;
371 background: white;
372 background-image: -moz-linear-gradient(white, white);
373 background-image: -ms-linear-gradient(white, white);
374 background-image: -o-linear-gradient(white, white);
375 background-image: -webkit-linear-gradient(white, white);
376 background-image: linear-gradient(white, white);
377 vertical-align: bottom; }
378
379 input[type=checkbox]:not(old):checked + label > span {
380 background-image: -moz-linear-gradient(white, white);
381 background-image: -ms-linear-gradient(white, white);
382 background-image: -o-linear-gradient(white, white);
383 background-image: -webkit-linear-gradient(white, white);
384 background-image: linear-gradient(white, white); }
385
386 input[type=checkbox]:not(old):checked + label > span:before {
387 content: '\f26b';
388 display: block;
389 color: #222;
390 font-size: 11px;
391 line-height: 1.2;
392 text-align: center;
393 font-family: 'Material-Design-Iconic-Font';
394 font-weight: bold; }
395
396 .agree-term {
397 display: inline-block;
398 width: auto; }
399
400 label {
401 position: absolute;
402 left: 0;
403 top: 50%;
404 transform: translateY(-50%);
405 -moz-transform: translateY(-50%);
406 -webkit-transform: translateY(-50%);
407 -o-transform: translateY(-50%);
408 -ms-transform: translateY(-50%);
409 color: #222; }
410
411 .label-has-error {
412 top: 22%; }
413
414 label.error {
415 position: relative;
416 background: url("../images/unchecked.gif") no-repeat;
417 background-position-y: 3px;
418 padding-left: 20px;
419 display: block;
420 margin-top: 20px; }
421
422 label.valid {
423 display: block;
424 position: absolute;
425 right: 0;
426 left: auto;
427 margin-top: -6px;
428 width: 20px;
429 height: 20px;
430 background: transparent; }
431 label.valid:after {
432 font-family: 'Material-Design-Iconic-Font';
433 content: '\f269';
434 width: 100%;
435 height: 100%;
436 position: absolute;
437 /* right: 0; */
438 font-size: 16px;
439 color: green; }
440
441 .label-agree-term {
442 position: relative;
443 top: 0%;
444 transform: translateY(0);
445 -moz-transform: translateY(0);
446 -webkit-transform: translateY(0);
447 -o-transform: translateY(0);
448 -ms-transform: translateY(0); }
449
450 .material-icons-name {
451 font-size: 18px; }
452
453 .signin-content {
454 padding-top: 67px;
455 padding-bottom: 87px; }
456
457 .social-login {
458 align-items: center;
459 -moz-align-items: center;
460 -webkit-align-items: center;
461 -o-align-items: center;
462 -ms-align-items: center;
463 margin-top: 80px; }
464
465 .social-label {
466 display: inline-block;
467 margin-right: 15px; }
468
469 .socials li {
470 padding: 5px; }
471 .socials li:last-child {
472 margin-right: 0px; }
473 .socials li a {
474 text-decoration: none; }
475 .socials li a i {
476 width: 30px;
477 height: 30px;
478 color: #fff;
479 font-size: 14px;
480 border-radius: 5px;
481 -moz-border-radius: 5px;
482 -webkit-border-radius: 5px;
483 -o-border-radius: 5px;
484 -ms-border-radius: 5px;
485 transform: translateZ(0);
486 -moz-transform: translateZ(0);
487 -webkit-transform: translateZ(0);
488 -o-transform: translateZ(0);
489 -ms-transform: translateZ(0);
490 -webkit-transition-duration: 0.3s;
491 transition-duration: 0.3s;
492 -webkit-transition-property: transform;
493 transition-property: transform;
494 -webkit-transition-timing-function: ease-out;
495 transition-timing-function: ease-out; }
496 .socials li:hover a i {
497 -webkit-transform: scale(1.3) translateZ(0);
498 transform: scale(1.3) translateZ(0); }
499
500 .zmdi-facebook {
501 background: #3b5998; }
502
503 .zmdi-twitter {
504 background: #1da0f2; }
505
506 .zmdi-google {
507 background: #e72734; }
508
509 .signin-form {
510 margin-right: 90px;
511 margin-left: 80px; }
512
513 .signin-image {
514 margin-left: 110px;
515 margin-right: 20px;
516 margin-top: 10px; }
517
518 @media screen and (max-width: 1200px) {
519 .container {
520 width: calc( 100% - 30px);
521 max-width: 100%; } }
522 @media screen and (min-width: 1024px) {
523 .container {
524 max-width: 1200px; } }
525 @media screen and (max-width: 768px) {
526 .signup-content, .signin-content {
527 flex-direction: column;
528 -moz-flex-direction: column;
529 -webkit-flex-direction: column;
530 -o-flex-direction: column;
531 -ms-flex-direction: column;
532 justify-content: center;
533 -moz-justify-content: center;
534 -webkit-justify-content: center;
535 -o-justify-content: center;
536 -ms-justify-content: center; }
537
538 .signup-form {
539 margin-left: 0px;
540 margin-right: 0px;
541 padding-left: 0px;
542 /* box-sizing: border-box; */
543 padding: 0 30px; }
544
545 .signin-image {
546 margin-left: 0px;
547 margin-right: 0px;
548 margin-top: 50px;
549 order: 2;
550 -moz-order: 2;
551 -webkit-order: 2;
552 -o-order: 2;
553 -ms-order: 2; }
554
555 .signup-form, .signup-image, .signin-form, .signin-image {
556 width: auto; }
557
558 .social-login {
559 justify-content: center;
560 -moz-justify-content: center;
561 -webkit-justify-content: center;
562 -o-justify-content: center;
563 -ms-justify-content: center; }
564
565 .form-button {
566 text-align: center; }
567
568 .signin-form {
569 order: 1;
570 -moz-order: 1;
571 -webkit-order: 1;
572 -o-order: 1;
573 -ms-order: 1;
574 margin-right: 0px;
575 margin-left: 0px;
576 padding: 0 30px; }
577
578 .form-title {
579 text-align: center; } }
580 @media screen and (max-width: 400px) {
581 .social-login {
582 flex-direction: column;
583 -moz-flex-direction: column;
584 -webkit-flex-direction: column;
585 -o-flex-direction: column;
586 -ms-flex-direction: column; }
587
588 .social-label {
589 margin-right: 0px;
590 margin-bottom: 10px; } }
591
592 /*# sourceMappingURL=style.css.map */
